<template>
  <div class="search-container">
    <div class="search-logo"></div>
    <div class="search-box">
      <span class="search-icon iconfont icon-sousuo"></span>
      <span>搜索商品名称</span>
    </div>
    <div class="search-user iconfont icon-lianxiren"></div>
  </div>
</template>
<script>
export default {
  name: "Search"
};
</script>
<style lang="scss">
@import "../../font/iconfont.css";
$base: 50;
.search-container {
  position: fixed;
  top:100rem / $base;
  left: 0;
  right: 0;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  padding: 25rem / $base;
  z-index: 100;
  .search-logo {
    width: 50rem / $base;
    height: 50rem / $base;
    background: url("../../img/mi.png") no-repeat;
    background-size: contain;
    background-position-y: 10rem / $base;
    margin: auto 30rem / $base auto 10rem / $base;
  }
  .search-box {
    flex: 1;
    background-color: #fff;
    font-size: 30rem / $base;
    padding: 10rem / $base;
    opacity: 0.5;
    box-shadow: 2px 2px 10px grey;
    &:hover{
        cursor: pointer;
    }
    .search-icon {
      font-size: 30rem / $base;
      margin: 20rem / $base;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .search-user{
    font-size: 40rem / $base;
    color: #797979;
    margin: auto 10rem / $base auto 30rem/$base;
  }
}
</style>